/*
 * @Description: 
 * @Version: 2.0
 * @Author: 
 * @Date: 2022-04-02 14:38:44
 * @LastEditors: cxc
 * @LastEditTime: 2022-04-06 15:48:21
 */
import './css/UserConTitle.css'
import React, { useState } from 'react'
import { Row, Col, Button, Space } from 'antd'
import { btnColor, btnLinkColor } from './../../../views/employee/color/employeeColor'

export default function UserConTitle(props) {
  const { handleCheck } = props
  const btnLists = [
    {
      id: 0,
      title: '员工资料',
      isChecked: true
    },
    {
      id: 1,
      title: '详细权限',
      isChecked: false
    },
    {
      id: 2,
      title: '管理范围',
      isChecked: false
    },
  ]
  const [checkIndex, setCheckIndex] = useState(0)
  // 切换
  function handleCheckClick(index) {
    console.log(index);
    setCheckIndex(index)
    handleCheck(index)
  }
  return (
    <>
      <Row>
        <Col span={24} className='UserConTitle'>
          {
            btnLists.map((item, index) => {
              return <>
                <Button className='UserConTitle_btn' onClick={() => handleCheckClick(index)} style={{ backgroundColor: checkIndex === index ? btnLinkColor : btnColor }}> {item.title}</Button>
              </>
            })
          }
          <span className='UserConTitle_span'>
            提示：如果修改了<span className='UserConTitle_span_bold'>[详细权限]、[管理范围]</span>,对应账号必须重新登录才会生效！
          </span>
        </Col>
      </Row>
    </>
  )
}
